<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { getShowValue } from "@/utils/equip";
import { datetimeFormat } from "@/utils/date";

interface Props {
    detailV2: Equip.EquipInfo;
}
const props = withDefaults(defineProps<Props>(), {});
const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        tooltip: { trigger: "axis" },
        color: ["#f3eabf"],
        grid: { left: "10%", top: "30", right: "5%", bottom: "30" },
        xAxis: {
            type: "category",
            axisLabel: { color: "#ccc" },
            axisTick: { show: false },
            data: [] as string[],
        },
        yAxis: {
            type: "value",
            axisLabel: { color: "#ccc" },
            splitLine: { show: false },
        },
        series: [
            {
                name: "储罐压力",
                type: "line",
                smooth: true,
                symbol: "none",
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#f3eabf33" },
                        { offset: 1, color: "#f3eabf00" },
                    ]),
                },
                data: [] as string[],
            },
        ],
    },
};
const oChart = ref<HTMLDivElement | null>(null);
watch(
    () => props.detailV2.histories,
    () => updateChart(),
    { deep: true }
);
onMounted(async () => {
    chart.instance = echarts.init(oChart.value);
    updateChart();
});
function updateChart() {
    chart.option.xAxis.data = props.detailV2.histories.map((v) => datetimeFormat(v.time, "h:m"));
    chart.option.series[0].data = props.detailV2.histories.map((v) => getShowValue(v.aiValues[7], props.detailV2.dtAI[7].x1, props.detailV2.dtAI[7].x2, props.detailV2.dtAI[7].y1, props.detailV2.dtAI[7].y2));
    chart.instance?.setOption(chart.option);
}
</script>

<template>
    <section>
        <cite>
            <h1>储罐压力曲线</h1>
        </cite>
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
